<template>
  <div>
    <ZWDrawer ref="zwRef" @close="close">
      <div class="content">
        <div class="alert">请根据，将以下推送地址以及您需要的字段参数，配置到对应第三方平台即可正常获取推送客户数据</div>
        <div class="alert">推送地址：{{ props.pushUrl ? props.pushUrl : '--' }}<el-button style="margin-left: 10px" @click="down(props.pushUrl)" size="small">复制</el-button> </div>
        <el-table ref="multipleTableRef" :data="tableData" stripe style="width: 100%" class="tableData" :header-cell-style="{ background: '#F9F9F9', color: '#909399' }">
          <el-table-column type="index" width="50" />
          <el-table-column label="字段名称" property="name"> </el-table-column>
          <el-table-column label="字段参数">
            <template #default="{ row }">
              <p>{{ row.system_code ? row.system_code : '--' }}</p>
            </template>
          </el-table-column>
          <el-table-column label="是否必填">
            <template #default="{ row }">
              <p>{{ row.is_required == 2 ? '必填' : '非必填' }}</p>
            </template>
          </el-table-column>
          <el-table-column label="字段类型">
            <template #default="{ row }">
              <p>{{ row.field_type ? row.field_type : '--' }}</p>
            </template>
          </el-table-column>
          <el-table-column label="字段值">
            <template #default="{ row }">
              <p>{{ row.attr_val_name ? row.attr_val_name : '--' }}</p>
            </template>
          </el-table-column>
          <el-table-column label="限制">
            <template #default="{ row }">
              <p>{{row.type == 'textarea'|| row.type == 'textbox'? row.max_length == 0 ? '不限制' : row.max_length+'个字符' : '--'}}</p>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button size="small" @click="down(row.system_code)">复制参数</el-button>
            </template>
          </el-table-column>
          <template #empty>
            <div style="height: 400px" class="emty">
              <img class="emty_img" src="@/assets/noData.png" alt="" />
              <div class="emty_title">{{ tableData.length || '暂无数据' }}</div>
            </div>
          </template>
        </el-table>
      </div>
    </ZWDrawer>
  </div>
</template>
<script lang="tsx" setup>
  import { ref, reactive, watch } from 'vue'
  import { ElMessage, ElButton } from 'element-plus'
  import useClipboard from 'vue-clipboard3'
  import ZwTable from '@/components/zw/table/Table'
  import ZWDrawer from '@/components/ZWDrawer.vue'
  import { clubSetting, sendurlData } from '@/api/customer/clubManage/commonSea'
  import { deepCopy } from '@/utils/helper'
  const { toClipboard } = useClipboard()
  const emit = defineEmits(['close'])
  const zwRef = ref(null)
  const props = defineProps(['isopen', 'pushUrl', 'delivery_address', 'title'])
  const tableRef = (ref < HTMLElement) | (null > null)
  const defaultParams = { is_enable: 1 }
  const isopen = ref(false)
  const url = ref('')
  const tableData = ref([])
  /* const state = reactive({
  searchParams: deepCopy(defaultParams)
})
let tableOption = [
  {
    type: 'index',
    width: 55,
    fixed: 'left'
  },
  {
    prop: 'name',
    label: '字段名称'
  },
  {
    prop: 'system_code',
    label: '字段参数'
  },
  {
    label: '字段类型',
    prop: 'type'
  },
  {
    prop: 'operate',
    label: '操作',
    fixed: 'right',
    isOperate: true,
    option: [
      {
        id: 0,
        name: '复制参数',
        click: (row) => {
          down(row.system_code)
        }
      }
    ]
  }
]
 */
  // const fetch = async () => {
  //   // 获取文件列表
  //   return clubSetting
  // }
  const close = () => {
    emit('close')
  }

  const down = async (val: any) => {
    try {
      await toClipboard(val)
      ElMessage.success('复制成功')
    } catch (e) {
      ElMessage.error('复制失败')
    }
  }
  watch(
    () => props.isopen,
    (val) => {
      if (val) {
        // geturl()
        isopen.value = val
        zwRef.value.drawer = true
        zwRef.value.isShow = false
        zwRef.value.width = '40%'
      }
    }
  )
  watch(
    () => props.delivery_address,
    (val) => {
      tableData.value = val
    },
    { deep: true }
  )
  watch(
    () => props.title,
    (val) => {
      val ? (zwRef.value.title = `推送地址【${val}】`) : '--'
    }
  )
</script>
<style scoped lang="scss">
  .content {
    padding: 16px 0;
    .alert {
      margin-bottom: 16px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #33302d;
      line-height: 20px;
    }
  }
  .emty {
    margin-top: 200px;
  }
  .emty_img {
    transform: translateX(15%);
  }
  .emty_title {
    margin-top: -50px;
  }
</style>
